<template>
  <div id="register">
    <el-row type="flex" justify="center">
      <el-col class="register-box">
        <h1 class="title">注册</h1>
        <el-form ref="registerForm" label-width="90px" :model="registerForm" :rules="registerRules">
          <el-form-item label="用户名 :" prop="username">
            <el-input v-model="registerForm.username" clearable></el-input>
          </el-form-item>

          <el-form-item label="邮箱 :" prop="email">
            <el-input v-model="registerForm.email" clearable></el-input>
          </el-form-item>

          <el-form-item label="密码 :" prop="password">
            <el-input v-model="registerForm.password" type="password" clearable></el-input>
          </el-form-item>

          <el-form-item label="确认密码 :" prop="checkPassword">
            <el-input
              v-model="registerForm.checkPassword"
              type="password"
              clearable
              @keyup.enter.native="registerSubmit('registerForm')"
            ></el-input>
          </el-form-item>
          <div class="btn-box">
            <el-button type="primary" @click="$router.push({name:'Login'})">去登陆</el-button>
            <el-button type="success" @click="registerSubmit('registerForm')">注册</el-button>
          </div>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    let validatePassword = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error("两次密码不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: "",
        email: "",
        password: "",
        checkPassword: "",
      },
      registerRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        checkPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { validator: validatePassword, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    registerSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http.post("/user/register", this.registerForm).then((res) => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: res.data.message,
              });
              this.$router.push({ name: "Login" });
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#register {
  .el-row {
    .register-box {
      margin-top: 50px;
      width: 300px;
      .title {
        text-align: center;
        font-weight: 300;
        margin-bottom: 15px;
      }
      .btn-box {
        text-align: center;
        .el-button {
          font-size: 15px;
        }
      }
    }
  }
}
</style>